<template>
  <div class="mt-textarea-wrap">
    <div hidden="{{!show}}">
      <textarea
        class="{{textareaClass}}"
        value="{{value}}"
        placeholder="{{placeholder}}"
        bindinput="onchange"
      />
    </div>

    <div hidden="{{show}}">
      <div class="mt-textarea-readonly {{innerValue ? '' : 'mt-textarea-readonly__placeholder'}}">{{innerValue ? innerValue : placeholder}}</div>
    </div>
  </div>
</template>

<script>
  const formEmitterBehavior = require('../../behaviors/emitter.behavior')
  const formELementBehavior = require('../../behaviors/form-element.behavior')

  export default {
    behaviors: [
      formEmitterBehavior,
      formELementBehavior
    ],
    relations: {
      '../mt-form-item/index': {
        type: 'ancestor', // 关联的目标节点应为祖先节点
        linked(v) {
          this.formItem = v
          // console.log('this.formItem', this.formItem)
        },
        unlinked() {
          this.formItem = null
        }
      }
    },
    properties: {
      placeholder: String,
      textareaClass: String,
      show: {
        type: Boolean,
        value: true
      },
      sModel: null
    },
    observers: {
      'sModel': function (field) {
        // console.log('field', field, this.data.sModel)
        this.setNativeValue(this.data.sModel)
      }
    },
    data() {
      return {
        formItem: null,
        innerValue: ''
      }
    },
    attached() {
      this.formItem = null
    },
    methods: {
      onchange(e) {

        // this.setData({
        //   mtLive: e.detail
        // })
        console.log('onChange', e.detail)

        this.setNativeValue(e.detail.value)
      },
      setNativeValue(val) {
        this.setData({
          innerValue: val
        })
        this.callComponent(this.formItem, 'mtFormChange', [val])
      }
    },
  }

</script>

<style lang="less">
  .mt-textarea-wrap {
    textarea {
      width: 100%;
    }
  }
</style>
